import '../../index.less';
import React from 'react';
import { Modal, message } from 'antd';
import { TodoList } from 'edframe/components/todo-list';
import MoodSelect from 'edframe/components/mood-select';
import CalendarSelect from 'edframe/components/calendar-select';

export default class MyCalendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedDate: new Date(),
            visible: false,
            mood: '',
            list: []
        };
    }

    onPanelChange(value, mode) {
        console.log(value, mode)
    }

    selectDate(date) {
        console.log('选中一天', date)
        let data = {
            mood: 'smile',
            list: [
                { id: 1, matter: '完成工作', okTime: '2019/9/30 18:00', flag: true },
                { id: 2, matter: '做EDaily', okTime: '', flag: false },
                { id: 3, matter: '跑步', okTime: '', flag: false },
                { id: 4, matter: '学习韩语', okTime: '', flag: false }
            ]
        };
        this.setState({ selectedDate: new Date(date), visible: true, mood: data.mood, list: data.list });
    }

    selectMood(mood) { // 选择心情
        message.success(`您选择的心情是${mood}`);
    }

    render() {
        let { selectedDate, visible, mood, list } = this.state;
        return (
            <div className="my-calendar-container">
                <div className="mb-10">
                    <h6 className="dis-ib mr-10">今天是</h6>
                    <h1 className="dis-ib">{new Date().format(5)}</h1>
                </div>
                <div className="my-calendar">
                    <CalendarSelect onSelect={(date) => this.selectDate(date)} />
                </div>
                <Modal
                    footer={null}
                    onCancel={() => this.setState({ visible: false })}
                    title={`${selectedDate ? selectedDate.format(6) : ''}打卡事项`}
                    visible={visible}
                >
                    <MoodSelect className="mb-10" onSelect={(e) => this.selectMood(e)} value={mood} />
                    <TodoList list={list} />
                </Modal>
            </div>
        )
    }
}
export { MyCalendar };